Objective: learn the various output format options affecting quality, speed and response size and choose the most appropriate one according to the specific application needs.

Step 1: Setting up the OpenLayers Preview

In this section you are going to setup a simplified OpenLayers client used to play with different format options for a GeoServer WMS GetMap request.

1. Ensure the topp:streams layer exists which was added in Lesson 2
2. Copy streams.htm from the CD and save it locally on the hard drive. You can also download it from:
   • http://docs.codehaus.org/download/attachments/11403474/streams.htm
   • http://sigma.openplans.org/streams.htm
3. Double click on streams.htm and it should open in your web browser:

Step 2: Formats with a Vector Layer

In this section you will learn how requesting different formats impact the quality and size of an image returned from a WMS GetMap request.

1. In your web browser right-click on the center of the OpenLayers map and select Properties
2. Note the image size of 42.32kb
   

Using the default options, GeoServer will return an full color image in which each pixel is a 24 bit RGB value.

1. Open streams.htm in a text editor
2. At approximately line 40:
   1. Change the value of the format option from image/png to image/png8

      format: 'image/png8'

   2. The result should look like:

      {
      height: '539',
      width: '800',
      layers: 'sf:streams',
      styles: '',
      srs: 'EPSG:26713',
      format: 'image/png8'
      }

3. Save streams.htm and refresh the view in your web browser
4. Right-click on the center of the OpenLayers map, select Properties, and note the image size: 16.3kb
   

Using these format options specifies to GeoServer that it should render with paletted images. A paletted image includes a color palette directly inside the image and pixels values are indexes into the palette. In this case an optimal 256 color palette is computed on the fly and each resulting pixel is 8 bits as opposed to 24 bits.

1. In the text editor:
   1. Revert the format option back to image/png

      format: 'image/png'

   2. Add the option palette with a value of safe

      palette: 'safe'

2. The result should look like:

   {
   height: '539',
   width: '800',
   layers: 'sf:streams',
   styles: '',
   srs: 'EPSG:26713',
   format: 'image/png',
   palette: 'safe'
   }

3. Save streams.htm and refresh the view in your web browser
4. Right-click on the OpenLayers map, select Properties, and note the image size: 14kb
   

In this case instead of the palette being generated on the fly, a pre-computed palette is used. In this case an internet safe palette.

1. In the text editor:
   1. Remove the palette option
   2. Add the option named format_options with a value of antialiasing:none

      format_options: 'antialias:none'

2. The result should look like:

   {
   height: '539',
   width: '800',
   layers: 'sf:streams',
   styles: '',
   srs: 'EPSG:26713',
   format: 'image/png',
   format_options: 'antialias:none'
   }

3. Save streams.htm and refresh the view in your web browser
4. Right-click on the OpenLayers map, select Properties, and note the image size: 5kb
   

This case illustrates a rendered image without antialiasing. Furthermore, since the SLD uses just one solid color, the output will be compressed to a 1bit per pixel png. Can you see the reduction in image quality?

1. In the text editor:
   1. Remove the format_options option
   2. Change the value of format to image/jpeg

      format: 'image/jpeg'

2. The result should look like:

   {
   height: '539',
   width: '800',
   layers: 'sf:streams',
   styles: '',
   srs: 'EPSG:26713',
   format: 'image/jpeg',
   }

3. Save streams.htm and refresh the view in your web browser
4. Right-click on the OpenLayers map, select Properties, and note the image size: 34kb
   

This case illustrates the use of a entirely different image format, in this case JPEG. Can you see the compression artifacts in the image?

Step 3: Formats with a Raster Layer

In this section you will repeat the steps from the last, but with a different dataset, a raster dataset.

1. Ensure the topp:dem layer exists which was added in Lesson 2
2. Copy dem.htm from the CD and save it locally on the hard drive. You can also get it from:
   • http://docs.codehaus.org/download/attachments/11403474/dem.htm
   • http://sigma.openplans.org/dem.htm
3. Double click on dem.htm and it should open in your web browser:
4. Repeat the steps from last section, making the incremental format changes to dem.htm.

For reference, here is what you should see at each step:

1. image/png: ~97kb
   
   Good quality.
   
   
2. image/png8: 59kb
   
   Some small artifacts.
   
   
3. image/png & palette=safe: ~14kb
   
   Oh the horror.
   
   
4. image/png & format_options=antialias:none:
   Same as full color png -> with rasters the antialias option is ignored.
   
   
5. image/jpeg: good quality, 20kb
   
   JPEG format much more suitable to raster datasets.

Extra Credit

Benchmarking

So far you've seen how to check for image size, but what is the speed impact of each option? To discover this, you need to run a little benchmark, that is, a set of timed requests.
On the lab PC's we have Apache installed, which usually includes "ab" (ApacheBench) a simple command line tool to run a benchmark.

Check what's the location of the ab executable, it should be in c:\ms4w\Apache\bin\ab.exe or in a similar location.
Now, we need the request that we'll use in the benchmark. Go to the OpenLayers map preview we used before, right click the map, and use "copy image location" (you are using Firefox, aren't you? If using IE, go to properties and copy the location from there).

Then open a command line prompt and type the following (only the start, the request url you can simple paste):

Make sure the url is in double quotes.

This will run 30 times the specified request and provide a summary of the results, included the average response time. Usually the first run includes a request that did hit the disk and it's slower, you can just run again the benchmark to avoid its effect.
These are the results of the benchmarks on my pc for the usual set of options, and the streams layer:

• image/png: 63ms
• image/png8: 140ms
• image/png & palette=safe: 69ms
• image/png & format_options=antialias:none: 63ms
• image/jpeg: 34ms

Now, png8 looks bad here, but try to add the time needed to travel to the client on a decent connection, say 200kbyte/s and you may want to reconsider your opinion (hint, 10kb take 50ms to travel over the net at that speed))

For extra bonus points, do the same using the sf:dem layer, and you'll discover jpeg is not only smaller, but also faster to generate.

Meta-tiling

Tiled rendering presents its own fair share of issues. A peculiar one has to deal with map labeling in presence of a labeling engine that does overlap avoidance and other interesting features like feature grouping (which GeoServer both have).

Meta tiling is a technique that tries to lessen the adverse tiling effects by drawing group of contiguous tiles as a seamless tile (the meta tile) and crop them afterwards in smaller elements.

To carry out this part of the tutorial we'll need the topp:states sample layer. First of all we need to prepare the OpenLayers code:

• go to the map preview section
• open the topp:states OpenLayers preview
• save the html to disk as "states.htm"

Now, open it again and click on the "tiled" link, in order to enable tiled rendering. Look at labels, and zoom in four times. Do you see the repeated labels? Yet, they only appear in some parts of the map, and not in others. Why? Because the preview is already using meta-tiling, and rendering is really done using 3x3 tiles (each tile being 256x256 pixels).

To have a look at how label look without meta-tiling. Open states.htm and locate the lines that do set up the tiled layer. You should see a couple of options like:

These are the options that do enable meta tiling, the first requires meta tiling to be enabled, the second provides the origin of the tiling system, that is, the lower
left corner of a tile (which is the same as the lower left corner of the map extents).
Try removing them and look at the map again with OpenLayers. Ugh... this is how it really looks if the server is not aware that it's doing tiled rendering.

streams.htm (text/html)
streams.htm (text/html)
ny-png8.png (image/png)
rast-safe.png (image/png)
rast-png8.png (image/png)
poly-full.png (image/png)
rast-jpeg.jpeg (image/jpeg)
rast-jpeg.jpeg (image/jpeg)
rast-full.png (image/png)
dem.htm (text/html)
dem.htm (text/html)
streams-safe.png (image/png)
streams-png8.png (image/png)
streams-na.png (image/png)
streams-jpeg.jpg (image/jpeg)
streams-full.png (image/png)